<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Kuro's Individual HTML Parallax</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
    <!-- Google web font "Open Sans" -->
    <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">                <!-- Font Awesome -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <link rel="stylesheet" href="css/tooplate-style.css"><!-- tooplate style -->
    <!-- Magnific Popup core CSS file -->
    <link rel="stylesheet" href="css/magnific-popup.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="parallax-window" data-parallax="scroll" data-image-src="img/bg-img-01.JPG">
    <section class="container tm-page-1-content">
        <div class="row">
            <div class="col-md-6 ml-auto tm-text-white">
                <header><h1>Souler, welcome~ </h1></header>
                <p>欢迎你!</p>
                <p>这里的酷乐酱的灵魂安放所。</p>
                <a href="#tm-section-2" class="btn btn-danger">Let's go...</a>
            </div>
        </div>

    </section>
</div>


<div id="tm-section-2" class="parallax-window" data-parallax="scroll" data-image-src="img/bg-img-02.jpg">
    <section class="container tm-page-1-content tm-page-2">
        <div class="row">
            <article class="col-md-6 tm-article tm-bg-white-transparent">
                <header><h2>酷乐酱什么鬼？</h2></header>
                <b>酷乐是一只经过生物改造的机械猫,个性我行我素，平时会懒洋洋，但一有危机时，会为了解决事件到处破坏而变成“破坏王子”，过著热血、疯狂和搞笑的生活。</b>
            </article>

            <article class="col-md-6 tm-article tm-bg-white-transparent">
                <header><h2>我是谁？</h2></header>
                <b>我就是超级酷乐酱的本体啊！～一只活了20岁7个月又XX天XX小时XX分XX秒的处女座蠢萌机械猫emmmm啊呸！我是人啦==你想看看我的世界吗☆ﾐ(o*･ω･)ﾉ</b>

                <a href="#tm-section-3" class="btn btn-danger ml-auto mr-0 tm-btn-block">去看看...</a>
            </article>
        </div>
    </section>
</div>
<div id="tm-section-3" class="parallax-window" data-parallax="scroll" data-image-src="img/bg-img-03.jpg">
    <section class="container tm-page-1-content">
        <div class="row1">
            <div class="col-xl-6 col-md-8 ml-auto">
                <article class="tm-bg-white-transparent-page3">
                    <header><h5 class="tm-bg-white">I'm Not a Loser</h5></header>
                    <p class="tm-bg-white2">
                        酷乐酱是个直男？no#扯远了。酷乐酱只是和操蛋的人生斗智斗勇的千万个普通人中的一个。目前在学html,css,javascript,jquery,ajax
                        <br/>,jsp,java,mysql,spring,springmvc,mybatis,struts
                        <br/>,hibernate,spring
                        boot...这么多怎么学的过来啊qwq相比之下还是吃鸡容易的多，酷乐酱可是刚枪王哦！总之，硬抗生活的同时酷乐会定期更新一些鸡汤警句和美食风景美图骚图哦⊙∀⊙！</p>
                    <a href="#tm-section-4" class="btn btn-danger tm-btn-right">去品一品...</a>
                </article>
            </div>
        </div>
    </section>
</div>
<div id="tm-section-4" class="parallax-window" data-parallax="scroll" data-image-src="img/bg-img-04.jpg">

    <div class="row tm-page-4-content">
        <article class="col-xs-6 col-md-4 tm-bg-white-transparent">
            <header><h3>Hardworking</h3></header>
            <p>A promise tomorrow is worth a lot less than trying today.<br/>明日的承诺远不及今日的行动。<br/><br/># 《侏罗纪公园》</p>
        </article>
        <article class="col-xs-6 col-md-4 tm-bg-white-transparent">
            <header><h3>Optimism</h3></header>
            <p>There is an entire future of incredible things waiting for you.<br/>未来还有很多美妙的事在等着你。<br/><br/>#
                《十三个原因：幕后故事》</p>
        </article>
        <article class="col-xs-6 col-md-4 tm-bg-white-transparent">
            <header><h3>Belief</h3></header>
            <p>The only way to achieve the impossible is to believe it is possible.<br/>战胜不可能的唯一方法就是要相信凡事皆有可能。<br/><br/>#
                《爱丽丝梦游仙境2：镜中奇遇记》</p>
        </article>
    </div>
</div>
<div class="parallax-window" data-parallax="scroll" data-image-src="img/bg-img-05.jpg">
    <div class="container">
        <div class="row">
            <div class="tm-img-container">
                <div class="tm-img-slider">

                    <a class="image-link" href="img/gallery-img-01.jpg"><img src="img/gallery-img-01-tn.jpg" alt="Image"
                                                                             class="tm-slider-img"></a>
                    <a class="image-link" href="img/gallery-img-02.jpg"><img src="img/gallery-img-02-tn.jpg" alt="Image"
                                                                             class="tm-slider-img"></a>
                    <a class="image-link" href="img/gallery-img-03.jpg"><img src="img/gallery-img-03-tn.jpg" alt="Image"
                                                                             class="tm-slider-img"></a>
                    <a class="image-link" href="img/gallery-img-04.JPG"><img src="img/gallery-img-04-tn.JPG" alt="Image"
                                                                             class="tm-slider-img"></a>
                    <a class="image-link" href="img/gallery-img-05.JPG"><img src="img/gallery-img-05-tn.JPG" alt="Image"
                                                                             class="tm-slider-img"></a>
                    <a class="image-link" href="img/gallery-img-06.jpg"><img src="img/gallery-img-06-tn.jpg" alt="Image"
                                                                             class="tm-slider-img"></a>

                </div>
            </div>
        </div>
    </div>
</div>
<div class="tlinks">Collect from <a href="http://www.cssmoban.com/">网页模板</a></div>

<div class="parallax-window tm-position-relative tm-form-section" data-parallax="scroll"
     data-image-src="img/bg-img-06.jpg">
    <div class="container ">
        <div class="row1 ">
            <div class="col-xs-12">
                <header><h5>Contact Me</h5></header>
            </div>
        </div>
        <div class="row tm-page-5-content">
            <div class="col-lg-4 col-md-6 col-xs-12">
                <div class="contact_message">
                    <form action="#contact" method="post" class="contact-form">
                        <div class="form-group">
                            <input type="text" id="contact_name" name="contact_name" class="form-control"
                                   placeholder="Name" required/>
                        </div>
                        <div class="form-group">
                            <input type="email" id="contact_email" name="contact_email" class="form-control"
                                   placeholder="Email" required/>
                        </div>
                        <div class="form-group">
                            <textarea id="contact_message" name="contact_message" class="form-control" rows="9"
                                      placeholder="Message" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-danger tm-btn-submit">Submit</button>
                    </form>
                </div>
            </div>
            <div class="col-lg-8 col-md-6 col-xs-12">
                <div class="tm-address-box">
                    <p>你喜欢酷乐酱的灵魂世界吗？喜欢就和酷乐酱交个朋友吧！空投你的邮箱给酷乐酱，或者take a look at酷乐的qq，wechat和soulapp账号哟
                    </p>
                    <address>
                        <b>←空投your邮箱</b><br>
                        <b>其他信息↓↓↓</b><br>
                        <br>
                        qq：<a href="javascript:;" id="qq">929703621</a><br>
                        wechat：<a href="javascript:;" id="wechat">Jzy_bb_1998</a><br>
                        soul：<a href="https://www.soulapp.cn/home">despacito</a>
                    </address>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>Copyright © 2019 霹雳机械猫军团
                . Design: <a href="https://user.qzone.qq.com/929703621/profile" target="_parent">超级酷乐酱</a>
        </div>
    </div>

</div>


<!-- load JS files -->
<script src="js/jquery-1.11.3.min.js"></script>        <!-- jQuery (https://jquery.com/download/) -->
<script src="js/parallax.min.js"></script>

<script type="text/javascript" src="slick/slick.min.js"></script>
<!-- Slick Carousel -->

<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.min.js"></script>

<script src="layer/layer.js"></script>
<script src="layui/layui.js"></script>

<script>

    function setCarousel() {

        var slider = $('.tm-img-slider');

        if (slider.hasClass('slick-initialized')) {
            slider.slick('destroy');
        }

        if ($(window).width() > 991) {
            // Slick carousel
            slider.slick({
                dots: true,
                infinite: true,
                slidesToShow: 4,
                slidesToScroll: 1
            });
        }
        else {
            slider.slick({
                dots: true,
                infinite: true,
                slidesToShow: 2,
                slidesToScroll: 1
            });
        }
    }

    $(document).ready(function () {

        setCarousel();
        $('.tm-img-slider').magnificPopup({
            delegate: 'a', // child items selector, by clicking on it popup will open
            type: 'image'
            // other options

        });

        $(window).resize(function () {
            setCarousel();
        });


        $('#qq').on('click', function () {
            var img = '<img src="img/qq.JPG">'
            layer.open({
                type: 1,//Page层类型
                //area: ['541px', '771px'],
                title: '酷乐的qq二维码',
                shade: 0.6,//遮罩透明度
                maxmin: true,//允许全屏最小化
                anim: 1,//0-6的动画形式，-1不开启
                content: img
            });
        });

        $('#wechat').on('click', function () {
            var img = '<img src="img/wechat.JPG">'
            layer.open({
                type: 1,//Page层类型
                //area: ['752px','910px'],
                title: '酷乐的微信二维码',
                shade: 0.6,//遮罩透明度
                maxmin: true,//允许全屏最小化
                anim: 1,//0-6的动画形式，-1不开启
                content: img
            });
        });

    });

</script>


</body>
</html>